<template>
  <demo-content :title="title">
    <p>
      context 的 rect()
      方法总是按顺时针方向绘制矩形，并没有提供逆时针绘制的选项。
    </p>
    <p>
      arcl()方法的最后一个 boolean参数用于控制所绘圆弧路径的方向。
      如果该参数是默认值 true， 那么浏览器就会以顺时针方向来绘制路径, 否则，浏
      览器就按照逆时针(counterclockwise)方向来绘制(或者按照Canvas规范中的说法，
      “反时针方向”(anti-clockwise))。
    </p>
    <canvas ref="canvasRef" width="400" height="300"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "制作剪纸图形";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.beginPath();
  // 矩形是顺时针画的
  ctx.rect(30, 30, 330, 220);
  // 上面的等价于下面5句
  // ctx.moveTo(30, 30);
  // ctx.lineTo(330, 30);
  // ctx.lineTo(330, 220);
  // ctx.lineTo(30, 220);
  // ctx.closePath();
  ctx.arc(90, 150, 50, 0, Math.PI * 2, true);
  ctx.moveTo(250, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(300, 200);
  ctx.closePath();
  ctx.fillStyle = "skyblue";

  ctx.fill();
});
</script>

<style src="./default.css" scoped></style>
